<template>
	<view>
		<nav-bars title="个人实名认证"></nav-bars>
		<view class="personal">
			<view class="personal_title">请提交个人资料</view>
			<view class="personal_nav">请上传第二代身份证</view>
			<view class="personal_icon">
				<u-icon label="该证件信息仅用于通联实名认证" label-size="26" label-color="#C3AB7C" name="error-circle" color="#C3AB7C" size="26"></u-icon>
			</view>
			<view class="personal_upload">
				<view class="personal_View" @click="GetPicture(0)">
					<image :src="imagejust ? imagejust.url : defaultOne"></image>
					<view class="LookView" v-if="imagejust">
						<view class="LookItem">
							<view class="LookEye" @click.stop="PreviewItemImg(imagejust)"><u-icon name="eye" color="#fff" size="50"></u-icon></view>
							<view @click.stop="DeleteItemImg(0)"><u-icon name="trash" color="#fff" size="50"></u-icon></view>
						</view>
					</view>
				</view>
				<view class="personal_View" @click="GetPicture(1)">
					<image :src="imageback ? imageback.url : defaultTwo"></image>
					<view class="LookView" v-if="imageback">
						<view class="LookItem">
							<view class="LookEye" @click.stop="PreviewItemImg(imageback)"><u-icon name="eye" color="#fff" size="50"></u-icon></view>
							<view @click.stop="DeleteItemImg(1)"><u-icon name="trash" color="#fff" size="50"></u-icon></view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<!-- <view class="personal_btnOne" @click="skipNext">跳过</view> -->
				<view class="personal_btnTwo" @click="GoNext">下一步</view>
			</view>
		</view>
	</view>
</template>
<script>
import URL from '@/config/url.js';
import Https from '@/service/verification.js';
export default {
	data() {
		return {
			imagejust: null,
			imageback: null,
			justBoole:false,
			backBoole:false,
			defaultOne: 'https://dev-liankun-1305433883.cos.ap-guangzhou.myqcloud.com/liankun/static/verification/just.png',
			defaultTwo: 'https://dev-liankun-1305433883.cos.ap-guangzhou.myqcloud.com/liankun/static/verification/back.png',
			BankCard: {
				Name: '', //姓名（人像面）1
				Sex: '', //性别（人像面）
				Nation: '', //民族（人像面）
				Birth: '', //出生日期（人像面）
				Address: '', //地址（人像面）
				IdNum: '', //身份证号（人像面）1
				Authority: '', //发证机关（国徽面）
				ValidDate: '', //证件有效期（国徽面）1
				AdvancedInfo: '', //证件有效期（国徽面）1
				startTime: '', //开始时间
				endTime: '', //结束时间
				imageList: {
					imagejust: null,
					imageback: null
				}
			}
		};
	},
	mounted() {},
	methods: {
		// // 跳过
		// skipNext() {
		// 	uni.navigateTo({
		// 		url: '/pagesOne/verification/personal/information'
		// 	});
		// },
		GoNext() {
			var that = this;
			var just = that.imagejust;
			var back = that.imageback;
			// var account = that.imageaccount;
			if (just != null && back != null) {
				// console.log(123);
				if (that.BankCard.Name != '' && that.BankCard.ValidDate != '' && that.justBoole == true && that.backBoole == true) {
					uni.setStorageSync('Personal', that.BankCard);
					uni.navigateTo({
						url: '/pages_Verification/verification/personal/information'
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '请上传正确的身份证',
						showCancel: false,
						success(res) {
							if (res.confirm) {
							}
						}
					});
				}
			}
			if (just == null) {
				uni.hideLoading();
				uni.showToast({
					title: '请上传身份证正面',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if (back == null) {
				uni.hideLoading();
				uni.showToast({
					title: '请上传身份证反面',
					icon: 'none',
					duration: 2000
				});
				return;
			}
		},
		PreviewItemImg(MES) {
			let img_url = [];
			img_url.push(MES.url);
			uni.previewImage({
				urls: img_url,
				current: 0,
				longPressActions: {
					success: function(data) {
						console.log(data);
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		DeleteItemImg(num) {
			var that = this;
			switch (num) {
				case 0:
					that.imagejust = null;
					that.BankCard.imageList.imagejust = null;
					break;
				case 1:
					that.imageback = null;
					that.BankCard.imageList.imageback = null;
					break;
			}
		},
		getIDCardOCR(id, text) {
			var that = this;
			let params = {
				img_id: id,
				card_side: text == '正' ? 'FRONT' : 'BACK'
			};
			Https.GetBankCardOCR(params).then(res => {
				if (res.code == 1) {
					console.log(res.data);
					var data = res.data;
					if (text == '正') {
						if (data.Name != '') {
							that.BankCard.Name = data.Name;
							that.BankCard.Sex = data.Sex;
							that.BankCard.Nation = data.Nation;
							that.BankCard.Birth = data.Birth;
							that.BankCard.Address = data.Address;
							that.BankCard.IdNum = data.IdNum;
							that.justBoole = true
							uni.showToast({
								title: '上传成功',
								icon: 'success'
							});
							setTimeout(function() {
								uni.hideLoading();
							}, 500);
						} else {
							uni.showModal({
								title: '提示',
								content: '请上传对应身份证正面照',
								showCancel: false,
								success(res) {
									if (res.confirm) {
									}
								}
							});
						}
					} else {
						if (data.ValidDate != '') {
							var start = data.ValidDate.split('-')[0];
							var end = data.ValidDate.split('-')[1];
							that.BankCard.ValidDate = data.ValidDate;
							that.BankCard.startTime = start.replace(/\./g, '-');
							that.BankCard.endTime = end.replace(/\./g, '-');
							that.backBoole = true
							uni.showToast({
								title: '上传成功',
								icon: 'success'
							});
							setTimeout(function() {
								uni.hideLoading();
							}, 500);
						} else {
							uni.showModal({
								title: '提示',
								content: '请上传对应身份证反面照',
								showCancel: false,
								success(res) {
									if (res.confirm) {
									}
								}
							});
						}
					}
					// console.log(that.BankCard);
				} else {
					if (text == '正') {
						// that.imagejust = null;
						uni.showToast({
							title: '请上传正确的正面照!',
							icon: 'none',
							duration: 2500
						});
						return;
					}
					if (text == '反') {
						// that.imageback = null;
						uni.showToast({
							title: '请上传正确的反面照!',
							icon: 'none',
							duration: 2500
						});
						return;
					}
				}
			});
		},
		GetPicture(num) {
			var that = this;
			uni.chooseImage({
				count: 1,
				success: res => {
					const tempFilePaths = res.tempFilePaths;
					uni.uploadFile({
						url: URL.ENTER_UPLOAD_IMAGE,
						filePath: tempFilePaths[0],
						name: 'file',
						success: uploadFileRes => {
							uni.showLoading({
								title: '上传中'
							});
							// console.log(uploadFileRes.data);
							let data = JSON.parse(uploadFileRes.data);
							if (data.code == 1) {
								console.log(data);
								switch (num) {
									case 0:
										that.imagejust = data.data;
										that.BankCard.imageList.imagejust = data.data;
										that.getIDCardOCR(data.data.id, '正');
										break;
									case 1:
										that.imageback = data.data;
										that.BankCard.imageList.imageback = data.data;
										that.getIDCardOCR(data.data.id, '反');
										break;
								}
								uni.hideLoading();
								// console.log(that.imageList);
							} else {
								uni.showToast({
									title: data.msg,
									icon: 'none'
								});
							}
						}
					});
				}
			});
		}
	}
};
</script>
<style lang="less">
page {
	background: #fff;
}
.personal {
	padding: 32rpx;
	.personal_title {
		font-size: 60rpx;
		font-weight: 500;
		color: #212121;
		margin-bottom: 79rpx;
	}
	.personal_nav {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}
	.personal_icon {
		padding-top: 6rpx;
		padding-bottom: 22rpx;
	}
	.personal_upload {
		display: flex;
		align-items: center;
		justify-content: space-around;
		.personal_View {
			width: 310rpx;
			height: 230rpx;
			overflow: hidden;
			border-radius: 12rpx;
			position: relative;
			.LookView {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: flex;
				align-items: center;
				width: 310rpx;
				height: 230rpx;
				background: rgba(0, 0, 0, 0.3);
				.LookItem {
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 auto;
					.LookEye {
						margin-right: 20rpx;
					}
				}
			}
		}
	}
	.personal_btnOne {
		height: 90rpx;
		border: 2rpx solid #c3ab7c;
		border-radius: 10rpx;
		margin-top: 45%;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		font-weight: 500;
		color: #c3ab7c;
	}
	.personal_btnTwo {
		height: 90rpx;
		background: #c3ab7c;
		border-radius: 10rpx;
		margin-top: 45%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		font-weight: 500;
		color: #ffffff;
	}
}
</style>
